<template>
  <div class="asidewrap">
    <div class="header">
      <div class="left">
        <div class="curr">
          <img src="https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/gold.981a5510.svg" alt="gold"
            class="icon source-icon" />
        </div>
        <a-select :default-value="selectList.defaultValue" style="width: 82px" size="small" @change="optionChange">
          <span slot="suffixIcon" class="el-icon-caret-bottom" />
          <a-select-option :value="item.value" v-for="item in selectList.optionList">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
      <div class="right">
        <div class="hottest">
          <div @click="this.getRecommand">
            <span class="el-icon-refresh"></span><span>推荐</span>
          </div>
        </div>
        <span class="line">|</span>
        <div class="new" @click="this.getLatest">最新</div>
      </div>
    </div>
    <div class="main">
      <div class="nodata" v-if="tableData.length === 0">
        —— 已显示全部内容 ——
      </div>
      <div class="item" v-for="item in tableData">
        <div class="feed-item" href="" target="_blank">
          <template></template>
          <div class="content">
            <span class="title">{{ item.article_info.title }}</span>
          </div>
          <div class="meta-box">
            <div class="article-info has-tag">
              <div class="tags">{{ item.tags[0].tag_name }}</div>
              <div class="timestamp" data-v-bfd81262="">
                {{ item.article_info.ctime }}
              </div>
            </div>
            <div class="interact-info">
              <div class="detail diggs">
                赞 {{ item.author_user_info.favorable_author }}
              </div>
              <div class="dot"></div>
              <div class="detail comments">
                评论 {{ item.author_user_info.study_point }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      tableData: [],
      testData: [],
      selectList: {
        defaultValue: "zh",
        optionList: [
          { name: "综合", value: "zh" },
          { name: "前端", value: "qd" },
          { name: "后端", value: "hd" },
          { name: "Android", value: "android" },
          { name: "IOS", value: "ios" },
          { name: "人工智能", value: "rgzn" },
          { name: "阅读", value: "yd" },
          { name: "开发工具", value: "kfgj" },
          { name: "代码人生", value: "dmrs" },
        ],
      },
      recommandorhot: 300,
      requestOptions: ["zh", "qd", "hd", "android", "ios", "rgzn", "yd", "kfgj", "dmrs"],
      requsetArgs: [
        {
          option: "zh",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_all_feed?uuid=7215089314782709263&aid=6587",
          cate_id: '',
        },
        {
          option: "qd",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637767543259144"
        },
        {
          option: "hd",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637769959178254"
        },
        {
          option: "android",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809635626879549454"
        },
        {
          option: "ios",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809635626661445640"
        },
        {
          option: "rgzn",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637773935378440"
        },
        {
          option: "yd",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637772874219534"
        },
        {
          option: "kfgj",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637771511070734"
        },
        {
          option: "dmrs",
          url: "https://api.juejin.cn/recommend_api/v1/article/recommend_cate_feed?uuid=7215089314782709263&aid=6587",
          cate_id: "6809637776263217160"
        }
      ],
      lastRequest: '',
    };
  },
  created() {
    console.log(
  `%cWelcome to my website!`,
  `
    color: white;
    font-size: 50px;
    text-shadow:
      3px 3px 0 #f44336,
      -1px -1px 0 #2196F3,
      1px -1px 0 #2196F3,
      -1px 1px 0 #2196F3,
      1px 1px 0 #2196F3;
  `
  );

  console.log(
  `%c在这里你可以看到类似于掘金的主页 
--by xiaowen`,
  `
    font-size: 25px;
    color: #2196F3;
  `
  );

    this.getArticles(this.requsetArgs[0])
  },
  methods: {
    getArticles: async function (args) {
      this.lastRequest = args
      this.tableData = []
      const res = await fetch(
        `${args.url}`,
        {
          headers: {
            accept: "*/*",
            "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
            "content-type": "application/json",
            "sec-ch-ua":
              '"Chromium";v="112", "Google Chrome";v="112", "Not:A-Brand";v="99"',
            "sec-ch-ua-mobile": "?0",
            "sec-ch-ua-platform": '\"Windows\"',
            "sec-fetch-dest": "empty",
            "sec-fetch-mode": "cors",
            "sec-fetch-site": "same-site",
            "x-secsdk-csrf-token":
              "000100000001f140947dd199c3773d08a5a2412a644b220380aaef038583ac776632155f414a1754dd5ea1fff281",
          },
          referrer: "https://e.juejin.cn/",
          referrerPolicy: "strict-origin-when-cross-origin",
          body: `{"client_type":6587,"cursor":"0","id_type":2,"limit":20,"sort_type":${this.recommandorhot},"cate_id":"${args.cate_id}"}`,
          method: "POST",
        }
      )
      if (args.option == "zh") {
        const json = await res.json();
        for (let i = 0; i < json.data.length; i++) {
          this.tableData.push(json.data[i].item_info);
          this.tableData[i].article_info.ctime = this.formatRelativeTime(this.tableData[i].article_info.ctime)
        }
      }
      else {
        res.json().then((data) => { 
          for (let i = 0; i < data.data.length; i++) {
            this.tableData.push(data.data[i])
            this.tableData[i].article_info.ctime = this.formatRelativeTime(this.tableData[i].article_info.ctime)
          }
        });
      }
    },

    optionChange(v) {
      const index = this.requestOptions.indexOf(v)
      this.getArticles(this.requsetArgs[index])
    },

    getRecommand() {
      this.recommandorhot = 200
      this.getArticles(this.lastRequest)
    },
    getLatest() {
      this.recommandorhot = 300
      this.getArticles(this.lastRequest)
    },
    // 标准化时间
    formatRelativeTime(dateString) {
      const date = new Date(dateString*1000);
      const now = new Date();
      const seconds = Math.floor((now - date) / 1000);

      let interval = Math.floor(seconds / 31536000);
      if (interval >= 1) {
        return interval + "年前";
      }
      interval = Math.floor(seconds / 2592000);
      if (interval >= 1) {
        return interval + "个月前";
      }
      interval = Math.floor(seconds / 86400);
      if (interval >= 1) {
        return interval + "天前";
      }
      interval = Math.floor(seconds / 3600);
      if (interval >= 1) {
        return interval + "小时前";
      }
      interval = Math.floor(seconds / 60);
      if (interval >= 1) {
        return interval + "分钟前";
      }
      return "刚刚";
    }

  },
};
</script>

<style lang="less" scoped>
.asidewrap {
  min-height: 44px;
  max-width: 400px;
  border-radius: 2px 2px 0 0;
  height: 100%;
  display: flex;
  flex-flow: column;

  .header {
    min-width: 400px;
    padding: 0 12px;
    display: flex;
    height: 44px;
    align-items: center;
    justify-content: space-between;
    border-radius: 2px 2px 0 0;
    background: #fff;
    border-bottom: 1px solid rgb(201, 205, 212);
    box-sizing: border-box;

    .curr {
      width: 28px;
      height: 28px;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-right: 16px;

      img {
        width: 100%;
      }
    }

    .left {
      display: flex;
    }

    .right {
      height: 44px;
      display: flex;
      align-items: center;
      font-size: 14px;
      color: #4e5969;
      cursor: pointer;

      .hottest {
        transition: all 0.15s linear;
        display: flex;
        align-items: center;
        color: #4e5969;

        .el-icon-refresh {
          width: 18px;
          height: 18px;
          margin-right: 3px;
          font-size: 15px;
          font-weight: bold;
        }
      }

      .line {
        color: #e5e6eb;
        font-size: 14px;
        margin: 0 10px;
      }
    }
  }

  .main {
    padding-top: 5px;
    background: #fff;
    overflow: auto;

    .nodata {
      height: 72px;
      display: flex;
      justify-content: center;
      align-items: center;
      color: #86909c;
      background: #fff;
    }

    .item {
      padding: 8px 20px;
      position: relative;
      cursor: pointer;

      .feed-item {
        transition: background-color 0.15s linear;
        display: block;
        text-decoration: none;

        .content {
          display: flex;
          flex-direction: row;
          align-items: center;

          .title {
            overflow: hidden;
            color: #1d2129;
            text-overflow: ellipsis;
            white-space: nowrap;
            font-size: 14px;
          }
        }

        .meta-box {
          display: flex;
          align-items: center;
          justify-content: space-between;
          color: #86909c;
          margin-top: 4px;

          .article-info {
            display: flex;
            font-size: 12px;
            flex-direction: row;
            align-items: center;

            .tags-wrapper {
              display: flex;
              flex-direction: row;
              align-items: center;
            }

            .timestamp {
              font-weight: 400;
              margin-left: 10px;
            }
          }

          .interact-info {
            display: flex;
            align-items: center;
            font-size: 12px;

            .dot {
              width: 2px;
              height: 2px;
              margin: 0 6px;
              border-radius: 50%;
              background: #86909c;
            }
          }
        }
      }

      &:hover {
        background-color:darkgray;
      }
    }
  }
}
</style>
